<template>
  <div class="shopping_mall">
    <div class="mall-header border-bottom">
      <div class="back-icon" @click="goBack">
        <i class="el-icon-arrow-left">返回</i>
      </div>
      <div class="mall-title">
        <p>二手商城</p>
      </div>
    </div>
    <div class="content-box">
      <div class="seach-box border-bottom">
        <el-input placeholder="请输入内容" v-model="seach" class="input-with-select">
        <el-select v-model="select" value="你好" slot="prepend">
          <el-option label="全部" value="0"></el-option>
          <el-option label="大一" value="1"></el-option>
          <el-option label="大二" value="2"></el-option>
          <el-option label="大三" value="3"></el-option>
          <el-option label="大四" value="4"></el-option>
        </el-select>
      </el-input>
      </div>
      <div class="content-wrapper" v-for="item in bookList" :key="item.id" @click="goDetails(item.id)">
        <div class="wrapper-item border-bottom">
          <div class="item-img item">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="item-text item">
            <div class="text-title">
              <span>{{ item.bookName }}</span>
            </div>
            <div class="text-price">
              <span>福利价</span>
              <span>￥ {{ item.price }}</span>
            </div>
            <div class="text-owner">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-geren"></use>
              </svg>
              <span>{{ item.owner }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Mall",
    data () {
      return {
        activeName: 'first',
        seach: '',
        select: '0',
        bookList: [
          {
            id: '1',
            imgUrl: 'http://www.gstate.cn/static/img/math1.fafa4e2.jpg',
            bookName: '星火高等数学 同济七版上册下册 无损好书',
            price: '12',
            owner: '我就是狗剩先生啊'
          },
          {
            id: '2',
            imgUrl: 'http://www.gstate.cn/static/img/tiancai.808dfd5.jpg',
            bookName: '【现货正版包邮】 天才在左疯子在右 完整版 高铭著',
            price: '22.50',
            owner: '博库图书专营店'
          },
          {
            id: '3',
            imgUrl: 'http://www.gstate.cn/static/img/cet4.dddaeda.jpg',
            bookName: '华研外语 专四阅读2019专四阅读理解专项训练',
            price: '34.80',
            owner: '华研图书专营店'
          },
          {
            id: '4',
            imgUrl: 'http://www.gstate.cn/static/img/cet.70fd274.jpg',
            bookName: '星火英语四级真题试卷',
            price: '37.90',
            owner: '星火图书旗舰店'
          },
          {
            id: '5',
            imgUrl: 'http://www.gstate.cn/static/img/conan.67bd743.jpg',
            bookName: '正版现货名侦探柯南漫画书1-92全套全册',
            price: '482',
            owner: '宇桐慧林图书专营店'
          },
          {
            id: '6',
            imgUrl: 'http://www.gstate.cn/static/img/conan.67bd743.jpg',
            bookName: '全集名侦探柯南连载20周年纪念1-92册大合集 ',
            price: '510',
            owner: '盛世金榜图书专营店'
          },
          {
            id: '7',
            imgUrl: 'http://www.gstate.cn/static/img/tiancai.808dfd5.jpg',
            bookName: '人性的弱点完整全译本 (美)戴尔·卡耐基(Dale Carnegie)著',
            price: '36',
            owner: '新华文轩网络书店'
          },
          {
            id: '8',
            imgUrl: 'http://www.gstate.cn/static/img/math2.30b318a.jpg',
            bookName: '星火高等数学 同济七版上册下册 无损好书',
            price: '12',
            owner: '我就是狗剩先生啊'
          }
        ]
      }
    },
    methods: {
      goBack () {
        this.$router.push('/')
      },
      goDetails (id) {
        this.$router.push('/goods_details/'+id)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  /* header */
  .mall-header {
    width: 100%;
    height: 50px;
    background: #fff;
  }
  .mall-title,.back-icon {
    float: left;
    color: #666;
    text-align: center;
  }
  .back-icon {
    width: 20%;
    line-height: 50px;
    font-size: 16px;
    z-index: 2;
    color: #1989fa;
  }
  .mall-title {
    width: 80%;
    line-height: 50px;
    font-size: 18px;
  }
  .mall-title p {
    margin: 0 20% 0 0;
  }
  /* 输入框 */
  .el-input >>> .el-select .el-input__inner {
    margin-right: 50px;
    padding: 0 10px;
  }
  .seach-box {
    padding: 10px 15px;
    background: #f8f8f8;
  }
  .content-wrapper {
    padding: 10px 15px;
  }
  .wrapper-item {
    display: flex;
  }
  .item {
    flex: 1;
    margin: .1rem
  }
  .item-img img {
    width: 100%;
    border-radius: 5px;
  }
  .item-text {
    flex: 3;
    margin-left: .7rem;
    font-size: 16px;
    font-weight: 500;
    font-family: sans-serif;
  }
  .text-title, .text-price, .text-owner {
    margin: .1rem 0 .3rem;
  }
  .text-price {
    font-size: 14px;
    padding: 5px 0;
  }
  .text-price span:first-child {
    color: #333;
  }
  .text-price span:last-child {
    color: #f00;
  }
  .text-owner {
    font-size: 14px;
  }
  .text-owner span {
    color: #666;
  }
</style>
